import React, { memo } from 'react'
import { BrowserRouter, Route, Link, Redirect } from 'react-router-dom'
import { Affix, Menu } from 'antd'
import AppHeader from './components/app-header/index'
import './assets/css/reset.css'
import { NavWrap } from './style'
import { NavConfig } from './config/menu_config'



import Individuation from './pages/individuation/index'
import Allmusiclist from './pages/allmusiclist/index'
import RankList from './pages/ranklist/index'
import ArtistList from './pages/artist-list/index'
import Mv from './pages/mv/index'
import NewSongs from './pages/new-songs/index'
import AppPlayer from './components/app-player/index'
import IntroDetail from './pages/intro-detail/index'

const { Item } = Menu

export default memo(function App(props) {

  return (
    <BrowserRouter>
      {/* 头部 */}
      <Affix offsetTop={0}>
        <AppHeader />
      </Affix>

      <NavWrap className="Nav">
        {/* 左边的菜单 */}

        <Affix offsetTop={63}>
          <Menu mode="inline" defaultSelectedKeys={['individuation']} style={{ width: '272px', background: '#f5f5f5', height: '100%' }}>
            {
              NavConfig.map((item, index) => {
                return (
                  <Item key={item.key}>
                    <Link to={item.path}>
                      <img src={item.icon} alt={item.title} className="nav-icon" />
                      <span className="nav-title">{item.title}</span>
                    </Link>
                  </Item>
                )
              })
            }
          </Menu>
        </Affix>

        {/* 右边的菜单 */}

        <Redirect path="/" to="/individuation" />
        <Route path="/individuation" component={Individuation} />
        <Route path="/allmusiclist" component={Allmusiclist} />
        <Route path="/ranklist" component={RankList} />
        <Route path="/artist-list" component={ArtistList} />
        <Route path="/mv" component={Mv} />
        <Route path="/new-songs" component={NewSongs} />
        <Route path="/musiclistdetail/:id/:time" component={IntroDetail} />

      </NavWrap>
      {/* 底部的播放器 */}
      <AppPlayer />
    </BrowserRouter>
  )
})
